<template>
  <div>
    <div v-show="!(isShowEditQAlist || isShowSearchQAlist)">
      <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="问题:" prop="question">
            <el-input v-model.trim="searchInfo.question" clearable ref="input-question" @keyup.enter.native="onSearch"></el-input>
          </el-form-item>
          <el-form-item label="展示对象:" prop="terminal">
            <el-select v-model="searchInfo.terminal" clearable placeholder="请选择">
              <el-option label="全部" value="0"></el-option>
              <el-option label="买家端" value="1"></el-option>
              <el-option label="卖家端" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="显示状态:" prop="isShow">
            <el-select v-model="searchInfo.isShow" clearable placeholder="请选择">
              <el-option label="否" value="0"></el-option>
              <el-option label="是" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="addNewQa">新增</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="isShow" slot-scope="qaList">
            <div>{{qaList.row.isShow === 0 ? '否' : '是' }}</div>
          </template>
          <template slot="answer" slot-scope="qaList">
            <el-tooltip placement="top">
              <div slot="content" v-html="qaList.row.answer"></div>
              <div  v-html="qaList.row.answer.substring(0, 10) + '...'" v-if="qaList.row.answer && qaList.row.answer.length >= 10"></div>
              <div  v-html="qaList.row.answer.substring(0, 10)" v-else></div>
            </el-tooltip>
          </template>
          <template slot="createTime" slot-scope="qaList">
            <div>{{qaList.row.createTime}}</div>
          </template>
          <template slot="terminal" slot-scope="qaList">
            <div v-if="qaList.row.terminal == '0'">全部</div>
            <div v-if="qaList.row.terminal == '1'">买家端</div>
            <div v-if="qaList.row.terminal == '2'">卖家端</div>
          </template>
          <template slot="operation" slot-scope="notice">
            <el-button type="text" @click="watchMsg(notice.row.id)">查看</el-button>
            <el-button type="text" @click="EditMsg(notice.row.id)">编辑</el-button>
            <el-button type="text" @click="deleteItem(notice.row)">删除</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <EditQAlist v-if="isShowEditQAlist"  @fresh="fresh" :dataInfo="qaDetail" @clearInfo="clearInfo"></EditQAlist>
    <SearchQAlist v-if="isShowSearchQAlist" @fresh="freshDetail" :dataInfo="qaDetail" @goBack="goBack"></SearchQAlist>
  </div>
</template>

<script>
  import EditQAlist from './components/EditQAlist'
  import SearchQAlist from './components/SearchQAlist'
  import FormatDate from '@/assets/js/formatDate'
  export default {
    name: "QAList",
    components: { EditQAlist, SearchQAlist },
    data() {
      return {
        title: 'QA列表',
        searchInfo: {
          terminal: "",
          question: "",
          isShow: null
        },
        dataInfo: {
          answer: "",
          question: "",
          terminal: "",
          isShow: ""
        },
        qaId: "",
        qaDetail: {},
        FormatDate: FormatDate,
        isShowEditQAlist: false,
        isShowSearchQAlist: false,
        dataTable: {
          border:true,
          loading:false,
          tr: [
            {
              id: '2',
              label: '展示对象',
              prop: 'terminal',
              show: 'template'
            },
            {
              id: '3',
              label: '问题',
              minWidth: "130",
              prop: 'question'
            },
            {
              id: '4',
              label: '回答',
              minWidth: "130",
              prop: 'answer',
              show: 'template'
            },
            {
              id: '5',
              label: '是否显示',
              show: 'template',
              prop: 'isShow'
            },
            {
              id: '6',
              label: '发布时间',
              width: "160",
              prop: 'createTime',
              show: 'template'
            },
            {
              id: '7',
              label: '排序',
              prop: 'sort'
            },
            {
              id: '8',
              label: '操作',
              show: 'template',
              fixed: 'right',
              width: "140",
              prop: 'operation'
            }
          ],
          data: []
        },
        pageTotal:0,
        pageSize:10,
        currentPage:2
      }
    },
    methods: {
      goBack() {
        this.qaId = "";
        this.isShowSearchQAlist = false
      },

      freshDetail() {
        let data = {
          id: this.qaId
        };
        ajax.get(apis.operate.getQaDetail, data).then(res => {
          if(res.code === "10000000") {
            this.qaDetail = res.data;
            this.qaDetail.showPage = res.data && res.data.isShow === 1 ? true : false;
            this.isShowSearchQAlist = true;
          } else {
            this.$message.error(res.message)
          }
        })
      },

      // 刷新页面
      fresh() {
        this.getData()
      },

      clearInfo() {
        this.qaDetail = {};
        this.isShowEditQAlist = false
      },

      refreshFuc() {
        this.resetForm('searchInfo');
        this.pageSize = 10;
        this.currentPage = 1;
        this.getData()
      },

      // 获取数据
      getData() {
        this.dataTable.loading = true;
        let data = {
          ...this.searchInfo,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };
        ajax.post(apis.operate.qaList, data).then(res => {
          if(res.code === "10000000") {
            this.dataTable.data = res.data.dataList;
            this.pageTotal = res.data.total
          } else {
            this.$message.error(res.message)
          }
          this.dataTable.loading = false;
        })
      },

      onSearch() {
        this.currentPage = 1;
        this.getData()
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo;
        this.getData()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo;
        this.getData()
      },

      // 编辑QA信息
      EditMsg(id) {
        let data = {
          id: id
        };
        ajax.get(apis.operate.getQaDetail, data).then(res => {
          if(res.code === "10000000") {
            this.qaDetail = res.data;
            this.qaDetail.terminal = this.qaDetail.terminal.toString();
            this.isShowEditQAlist = true;
          } else {
            this.$message.error(res.message)
          }
        })

      },
      // 查看QA信息
      watchMsg(id) {
        let data = {
          id: id
        };
        this.qaId = id;
        ajax.get(apis.operate.getQaDetail, data).then(res => {
          if(res.code === "10000000") {
            this.qaDetail = res.data;
            this.qaDetail.showPage = res.data && res.data.isShow === 1 ? true : false
            this.isShowSearchQAlist = true;
          } else {
            this.$message.error(res.message)
          }
        })
      },

      // 删除
      deleteItem(obj) {
        let data = {
          ...obj,
          isDelete: 1
        };
        this.$confirm('此操作将删除此QA, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ajax.post(apis.operate.qaEdit, data).then(res => {
            if (res.code === "10000000") {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getData()
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {

        });
      },

      // 新增qa信息
      addNewQa() {
        this.isShowEditQAlist = true;
      },
    },
    created() {
      this.onSearch()
    }
  }
</script>

<style lang="scss" scoped>

</style>
